<template>
  <div class="console-container">
    <n-grid :cols="24" x-gap="16">
      <n-gi :span="17">
        <n-card :bordered="false">
          <n-grid :cols="4" x-gap="16">
            <n-gi v-for="item in countCardData" :key="item.label" :span="1">
              <n-card :bordered="false" class="count-card">
                <n-statistic :label="item.label" tabular-nums>
                  <n-number-animation :from="0" :to="item.value"/>
                </n-statistic>
                <img :alt="item.icon" :src="`${currentPageImagePath}/${item.icon}.png`"/>
              </n-card>
            </n-gi>
          </n-grid>
        </n-card>
        <n-card :bordered="false" class="h-[490px] mt-4" title="数据趋势">
          <template #header-extra>
            <n-space class="w-[408px]" justify="space-between">
              <n-button type="tertiary">今天</n-button>
              <n-button type="tertiary">昨天</n-button>
              <n-button type="tertiary">近7天</n-button>
              <n-button type="tertiary">最近30天</n-button>
            </n-space>
          </template>
          <div ref="trendGraphRef" class="w-full h-full"></div>
        </n-card>
        <n-card :bordered="false" class="access-record-card mt-4" title="访问记录排行TOP 5">
          <n-data-table :bordered="false" :columns="unref(accessTable.columns)" :data="accessTable.dataList"
                        size="large"/>
        </n-card>
      </n-gi>
      <n-gi :span="7">
        <n-card :bordered="false" class="navigation-card" title="欢迎使用防红系统！">
          <n-p class="mb-6 text-[#2D3A70]">开始使用</n-p>
          <n-button class="mb-14" size="large" type="primary">添加落地域名</n-button>
          <n-descriptions :column="2" :separator="''" label-align="left" label-placement="left">
            <n-descriptions-item v-for="item in navigationCardList" :key="item.title">
              <template #label>
                <span @click="clickNavigation(item)">
                  <img :alt="item.icon" :src="`${currentPageImagePath}/${item.icon}.svg`"/>
                  {{ item.title }}
                </span>
              </template>
            </n-descriptions-item>
          </n-descriptions>
        </n-card>
        <n-card :bordered="false" class="h-[464px] mt-4" title="访问浏览器占比">
          <div ref="browserPieChartRef" class="w-full h-full"></div>
        </n-card>
      </n-gi>
    </n-grid>
  </div>
</template>

<script setup>
import {ref, h, onMounted, getCurrentInstance, reactive, unref} from 'vue'
import {useRouter} from 'vue-router'
import {NTag} from 'naive-ui'
import {dashboard} from '@api/userApi'
import {GridComponent, TooltipComponent, LegendComponent} from 'echarts/components'
import {LineChart, PieChart} from 'echarts/charts'
import {UniversalTransition, LabelLayout} from 'echarts/features'
import {SVGRenderer} from 'echarts/renderers'

const {proxy} = getCurrentInstance()
const router = useRouter()
proxy.$echarts.use([GridComponent, LineChart, SVGRenderer, UniversalTransition, TooltipComponent, LegendComponent, PieChart, LabelLayout])
const currentPageImagePath = '/images/backstage-images/home-images'

const countCardData = ref([
  {
    label: '防红链接',
    value: 0,
    icon: 'home_png_link',
    field: 'url_count'
  }, {
    label: '黑名单',
    value: 0,
    icon: 'home_pic_blacklist',
    field: 'blacklist'
  }, {
    label: '正常域名',
    value: 0,
    icon: 'home_pic_normal',
    field: 'normal'
  }, {
    label: '异常域名',
    value: 0,
    icon: 'home_pic_abnormal',
    field: 'exception'
  }
])

const getDashboard = async () => {
  const res = await dashboard()
  res.code === 0 ? countCardData.value.forEach(item => item.value = res.data[item.field]) : $message.error(res.msg)
}
getDashboard()

const navigationCardList = [
  {
    icon: 'home_banner_link',
    title: '防红链接',
    path: '/anti-red'
  }, {
    icon: 'home_banner_home',
    title: '首页风格'
  }, {
    icon: 'home_banner_site',
    title: '查看站点'
  }, {
    icon: 'home_banner_ip',
    title: 'IP记录'
  }, {
    icon: 'home_banner_account',
    title: '填写基本信息'
  }, {
    icon: 'home_bannner_settings',
    title: '填写高级设置'
  }, {
    icon: 'home_banner_jump',
    title: '跳转设置'
  }, {
    icon: 'home_icon_guide',
    title: '帮助中心'
  }
]

const clickNavigation = item => {
  item.path ? router.push(item.path) : ''
}

const accessTable = reactive({
  columns: [
    {
      title: '序号',
      key: 'id'
    }, {
      title: '访问链接',
      key: 'url'
    }, {
      title: '访问数量',
      key: 'num',
      render(row) {
        return h(NTag, {
          type: 'primary',
          size: 'large',
          bordered: false,
          class: 'px-6 rounded'
        }, {default: () => row.num})
      }
    }, {
      title: '更新时间',
      key: 'update_time',
      render(row) {
        return h('span', {
          class: 'text-[#96A0B1]'
        }, {default: () => row.update_time})
      }
    }
  ],
  dataList: [
    {id: 1, url: 'https://www.bilibili.com', num: 325, update_time: '2022-03-22'},
    {id: 2, url: 'https://huaban.com', num: 280, update_time: '2022-03-22'},
  ]
})

onMounted(() => {
  const trendGraphChart = proxy.$echarts.init(proxy.$refs.trendGraphRef)
  const browserPieChart = proxy.$echarts.init(proxy.$refs.browserPieChartRef)
  const trendGraphOption = ref({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    grid: {
      top: 24,
      left: 24,
      right: 24,
      bottom: 24,
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      axisLabel: {
        color: '#96A0B1',
        fontSize: 16,
        margin: 17
      },
      axisLine: {
        lineStyle: {
          color: '#E0E1E4',
        }
      },
      axisTick: {
        show: false
      },
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#96A0B1',
        fontSize: 16,
        margin: 25
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#E7EBEF',
          type: 'dashed'
        }
      }
    },
    series: {
      type: 'line',
      stack: 'Total',
      // smooth: true,
      symbol: 'circle',
      symbolSize: [8, 8],
      areaStyle: {
        color: proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {offset: 0, color: 'rgba(83, 114, 236)'},
          {offset: 1, color: 'rgba(255, 255, 255, 0.5)'}
        ])
      },
      emphasis: {
        focus: 'series',
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    }
  })
  const browserPieOption = ref({
    color: ['#00DFA6', '#7E98FA', '#46CDEF', '#FFB700', '#A48EFF', '#C9D5FF'],
    tooltip: {
      trigger: 'item'
    },
    legend: {
      bottom: 0,
      left: 'center',
      // itemGap: 48,
      itemWidth: 16,
      itemHeight: 6,
      textStyle: {
        color: '#96A0B1',
        fontSize: 16,
        padding: [0, 0, 0, 10],
      }
    },
    series: [
      {
        type: 'pie',
        radius: ['50%', '70%'],
        center: ['50%', '38%'],
        avoidLabelOverlap: false,
        itemStyle: {
          // borderRadius: '12px',
          borderCap: 'round',
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 16,
            fontWeight: 'bold',
            color: '#96A0B1'
          },
          itemStyle: {
            // borderRadius: '12px'
          },
        },
        labelLine: {
          show: false
        },
        data: [
          {value: 1048, name: '微信内嵌浏览器'},
          {value: 735, name: 'Chrome浏览器'},
          {value: 580, name: 'Safari浏览器'},
          {value: 484, name: 'QQ浏览器'},
          {value: 300, name: '搜狗浏览器'},
          {value: 100, name: '其他'},
        ]
      }
    ]
  })
  trendGraphOption && trendGraphChart.setOption(trendGraphOption.value)
  browserPieOption && browserPieChart.setOption(browserPieOption.value)
  window.onresize = function () {
    trendGraphChart.resize()
    browserPieChart.resize()
  }
})
</script>

<style lang="less" scoped>
.console-container {
  .n-card.mt-4 {
    &:deep(.n-card-header) {
      .n-card-header__main {
        font-size: 20px;
        color: #00000099;
      }
    }
  }

  .count-card {
    height: 150px;
    background-color: #F7F9FF;
    border-radius: 4px;

    &:deep(.n-card__content) {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .n-statistic {
        .n-statistic-value {
          margin-top: 16px;

          .n-statistic-value__content {
            font-size: 40px;
          }
        }
      }
    }
  }

  .navigation-card {
    background-color: #E1EBFF;
    padding-bottom: 127px;

    &:deep(.n-card-header) {
      .n-card-header__main {
        color: #2D3A70;
        font-size: 24px;
      }
    }

    &:deep(.n-card__content) {
      .n-descriptions {
        .n-descriptions-table-wrapper {
          .n-descriptions-table {
            .n-descriptions-table-row {
              .n-descriptions-table-content {
                padding-bottom: 16px;

                .n-descriptions-table-content__label {
                  cursor: pointer;
                  vertical-align: middle;

                  img {
                    display: inline-block;
                  }

                  color: var(--n-color-target);
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
